@fz10: 10px;
@fz12: 12px;
@fz14: 14px;
@fz16: 16px;
@color-h1: #111111;
@color-h2: #656565;
@color-h3: #919191;
@color-h4: #DF0011;
@color-bg: #f3f4f5;
@theme-color: #DF0011;

// dialog
.dialog{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  &__mask{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, .4);
  }
  &__main{
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 12px;
    .win{
      flex: 1;
      background: #fff;
      font-size: @fz14;
      border-radius: 5px;
      &__t{
        .t{
          min-height: 44px;
          display: flex;
          align-items: center;
          display: flex;
          align-items: center;
          justify-content: center;
          &__l{
            width: 44px;
            flex-shrink: 0;
            padding: 0 12px;
          }
          &__c{
            font-size: @fz14;
            flex: 1;
            text-align: center;
          }
          &__r{
            width: 44px;
            flex-shrink: 0;
            padding: 0 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon{
              width: 20px;
              height: 20px;
            }
          }
        }
      }
      &__c{
        .t {
          height: 34px;
          margin: 0 12px;
          display: flex;
          align-items: center;
          background: rgba(240, 234, 234, 1);
          border-radius: 3px;
          &__l {
            flex: 1;
            padding: 6px 12px;
            color: @color-h2;
          }
          &__r {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            .icon {
              width: 20px;
              height: 20px;
              border-radius: 4px;
              background: #eee;
            }
          }
        }
      }
      &__b{
        padding: 12px 0;
      }
    }
  }
}


// hairline
.hairline{
  width: 100%;
  height: 1px;
  position: relative;
  &::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 1px;
    transform: scale(.5);
    transform-origin: left bottom;
    background: #dddddd;
  }
}
// btn
.btn-wrap{
  width: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  .btn{
    border-radius: 3px;
    padding: 0 40px;
    color: #fff;
    font-size: @fz14;
    background: linear-gradient(90deg, @theme-color, #e54b4d);
    box-shadow: 0 0 20px #ccc;
    transition: all 300ms;
    &:before, &:after{
      content: none;
    }
    &:active{
      opacity: .8;
    }
  }
}

// calendar
.calendar{
  overflow: hidden;
  padding: 4px 8px;
  &__item{
    float: left;
    width: 14.2857%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 0;
    position: relative;
  }
}

.p{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0 5px;
  &__prev{
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  &__next{
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  &__text{
    flex-shrink: 0;
    padding: 0 20px;
    font-size: @fz14;
    font-weight: bold;
  }
  .icon{
    width: 20px;
    height: 20px;
  }
}

.cell{
  width: 24px;
  height: 24px;
  font-size: @fz12;
  color: @color-h3;
  line-height: 24px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.cell.cell--in{
  color: @color-h2;
}
.cell-bg{
  position: absolute;
  top: 4px;
  z-index: 1;
  width: 100%;
  height: 24px;
  background:rgba(243,186,179,1);
}
.cell-bg.cell-bg--start{
  background:rgba(243,186,179,1);
  width: calc(~'100% - (100% - 24px) / 2');
  left: calc(~'(100% - 24px) / 2');
}
.cell-bg.cell-bg--end{
  background:rgba(243,186,179,1);
  width: calc(~'100% - (100% - 24px) / 2');
  right: calc(~'(100% - 24px) / 2');
}
.cell-bg.cell-bg--start +.cell{
  background: @theme-color;
  color: #fff;
}
.cell-bg.cell-bg--end +.cell{
  background: @theme-color;
  color: #fff;
}
.cell-one +.cell{
  background: @theme-color;
  color: #fff;
}